﻿@model IEnumerable<trangbaocao.Models.UserModel>
           
@*<style type="text/css">
    .web_dialog
    {
        display: none;
        position: fixed;
        top:40%;
        left:50%;            
        margin-left: -190px;
        margin-top: -100px;
        padding: 0px;
        z-index: 102;
        border-radius: 5px;  
            
    }
    .web_dialog_overlay
    { 
        border-radius: 5px; 
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #000000;
        opacity: .15;
        filter: alpha(opacity=15);
        -moz-opacity: .15;
        z-index: 101;
        display: none;
    }   
              
</style>
<script type="text/javascript">      
    $(document).ready(function () {
        $("#btnShowSimple").click(function (e) {
            ShowDialog(false);
            e.preventDefault();
        });

        $("#btnShowModal").click(function (e) {
            ShowDialog(true);
            e.preventDefault();
        });

        $("#btnClose").click(function (e) {
            HideDialog();
            e.preventDefault();
        });

    });
    function ShowDialog(modal) {
        $("#overlay").show();
        $("#dialog").fadeIn(300);

        if (modal) {
            $("#overlay").unbind("click");
        }
        else {
            $("#overlay").click(function (e) {
                HideDialog();
            });
        }
    }
    function HideDialog() {
        $("#overlay").hide();
        $("#dialog").fadeOut(300);
    }        
</script>   
    
<script type="text/javascript">
    $(function () {
        // Initialize progress dialog ...
        $("#ProgressDialog").dialog({
            autoOpen: false,
            draggable: false,
            modal: true,
            resizable: false,
            title: "Loading",
            closeOnEscape: false,
            open: function () { $(".ui-dialog-titlebar-close").hide(); } // Hide close button
        });

        // Initialize success dialog ...
        $("#SuccessDialog").dialog({
            autoOpen: false,
            draggable: false,
            modal: true,
            resizable: false,
            title: "Success",
            buttons: [
            {
                text: "Continue",
                click: function () { $(this).dialog("close"); }
            },
            {
                text: "Reload",
                click: function () { location.reload(); }
            }
        ]
        });

        // Handle form submit ...
        $("form").live("submit", function (event) {
            event.preventDefault();
            var form = $(this);
            $("#ProgressDialog").dialog("open");
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                success: function (data) {
                    if (data[0]) {
                        $("#SuccessContainer").html(data[1]);
                        $("#SuccessDialog").dialog("open");
                    } else {
                        $("#FormContainer").html(data[1]);
                        $.validator.unobtrusive.parse("form");
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                },
                complete: function () {
                    $("#ProgressDialog").dialog("close");
                }
            });
        });
    });
</script>*@	
<!--Body-->
<div class="container_12">
    <div class="grid_12">
        <!-- Notification boxes -->
        @if (TempData["msg"] != null)
        {                            
            <span class="notification n-success">@TempData["msg"]</span>
        } 
        <div class="bottom-spacing">
            <!-- Button -->
            <div class="float-right">
                <a href="@Url.Action("AddUser","User")" class="button">
                    <span>Thêm mới <img src="../../Content/Body/Images/plus-small.gif"  width="12" height="9" alt="New article" /></span>
                </a>
            </div>                    
            <!-- Table records filtering -->
            Filter: 
            <select class="input-short">
                <option value="1" selected="selected">Select filter</option>
                <option value="2">Created last week</option>
                <option value="3">Created last month</option>
                <option value="4">Edited last week</option>
                <option value="5">Edited last month</option>
            </select>       
        </div>   
        <!-- Example table -->
        <div class="module">
            <h2><span>@*Sample table*@</span></h2>                    
            <div class="module-table-body">
                <form action="">
                    <table id="myTable" class="tablesorter">
                        <thead>
                            <tr><th ></th>
                                <th ></th>
                                <th >STT</th>
                                <th >Tên đăng nhập</th>
                                <th >Mật khẩu</th>
                            </tr>
                        </thead>
                        <tbody>
                        @{int stt = 0;}
                        @foreach (var item in Model)
                        {
                            stt++;
                            <tr> 
                                <td>
                                    <a href="@Url.Action("DeleteUser","User", new { id=item.user_name })" onclick="return confirm('Bạn muốn xóa người dùng này?');" title="Xóa thông tin"><img src="../../Content/Body/Images/cross-on-white.gif" width="16" height="16" alt="delete" /></a>                                    	
                                    @*<a href="" title=""><img src="../../Content/Body/Images/tick-circle.gif"  width="16" height="16" alt="published" /></a>*@
                                    <a href="@Url.Action("EditUser","User", new { id=item.user_name })" title="Sửa thông tin"><img src="../../Content/Body/Images/pencil.gif"  width="16" height="16" alt="edit" /></a>&nbsp;&nbsp;&nbsp;
                                    @*<a href=""><img src="../../Content/Body/Images/balloon.gif" width="16" height="16" alt="comments" /></a>*@
                                    
                                </td>
                                <td class="align-center">@stt</td>
                                <td class="align-center"><input type="checkbox" /></td>
                                <td> @Html.DisplayFor(modelItem => item.user_name)</td>
                                <td>@Html.DisplayFor(modelItem => item.password)</td>                                    
                               
                            </tr>
                        }   
                        </tbody>
                    </table>
                </form>
                <div class="pager" id="pager">
                    <form action="">
                        <div>
                        <img class="first" src="arrow-stop-180.gif"  alt="first"/>
                        <img class="prev" src="arrow-180.gif" alt="prev"/> 
                        <input type="text" class="pagedisplay input-short align-center"/>
                        <img class="next" src="arrow.gif" alt="next"/>
                        <img class="last" src="arrow-stop.gif" alt="last"/> 
                        <select class="pagesize input-short align-center">
                            <option value="10" selected="selected">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                        </select>
                        </div>
                    </form>
                </div>
                <div class="table-apply">
                    <form action="">
                    <div>
                    <span>Chọn hành động:</span> 
                    <select class="input-medium">
                        <option value="1" selected="selected">Chọn...</option>
                        <option value="2">Xóa chọn</option>
                        <option value="3">Khóa chọn</option>
                                
                    </select>
                    </div>
                    </form>
                </div>
                <div style="clear: both"></div>
            </div> <!-- End .module-table-body -->
        </div> <!-- End .module -->                     
        <div class="pagination">           
            <a href="" class="button"><span><img src="arrow-stop-180-small.gif"  height="9" width="12" alt="First" /> First</span></a> 
            <a href="" class="button"><span><img src="arrow-180-small.gif"  height="9" width="12" alt="Previous" /> Prev</span></a>
            <div class="numbers">
                <span>Page:</span> 
                <a href="">1</a> 
                <span>|</span> 
                <a href="">2</a> 
                <span>|</span> 
                <span class="current">3</span> 
                <span>|</span> 
                <a href="">4</a> 
                <span>|</span> 
                <a href="">5</a> 
                <span>|</span> 
                <a href="">6</a> 
                <span>|</span> 
                <a href="">7</a> 
                <span>|</span> 
                <span>...</span> 
                <span>|</span> 
                <a href="">99</a>
            </div> 
            <a href="" class="button"><span>Next <img src="arrow-000-small.gif"  height="9" width="12" alt="Next" /></span></a> 
            <a href="" class="button last"><span>Last <img src="arrow-stop-000-small.gif"  height="9" width="12" alt="Last" /></span></a>
            <div style="clear: both;"></div> 
        </div>                                              
	</div> <!-- End .grid_12 -->            
    <div style="clear:both;"></div>            
</div> <!-- End .container_12 -->
<!----------------------------------------------------------------->
@*@Html.Partial("Html_form/Add")*@

    

           

	